<template>
	<view>
		<view class="titlebg">
			<view class="title_bg">
				<label class="title">{{infoTitle}}</label>
			</view>
			<view class="inputbg" v-show="showInput">
				<input type="text" :placeholder="infoPlaceHolder" v-model="info" />
			</view>
			<!-- 选择地区插件 https://ext.dcloud.net.cn/plugin?id=16282 -->
			<view class="inputbg" v-show="showAddress">
				<sh-address class="address" @change="change" @columnchange="columnchange">
					{{
				    addressInfo? `${addressInfo.province} ${addressInfo.city} ${addressInfo.area}`: "点此选择区域"
				  }}
				</sh-address>
			</view>
			<view class="radioinputbg" v-show="showGender">
				<radio-group @change="radioChange">
					<label class="radiolbl1">
						<radio class="radio" active-background-color="#1de1ff" value="0" :checked="this.info == '男'" />
						<text>男</text>
					</label>
					<label class="radiolbl2">
						<radio class="radio" active-background-color="#1de1ff" value="1" :checked="this.info == '女'" />
						<text>女</text>
					</label>
				</radio-group>

			</view>
		</view>

		<view>
			<view class="buttons">
				<button class="subBtn" type="primary" @click="saveClick">保存</button>
			</view>
		</view>
		<view>
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog :showClose="showClose" :type="msgType" cancelText="关闭" confirmText="同意" title="通知"
					:content="alertTitle" @confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import config from '../../common/config.js';
	export default {
		onLoad(option) {
			console.log(option.type);
			let item = JSON.parse(decodeURIComponent(option.item));
			this.type = option.type;
			if (this.type == "nickname" || this.type == "motto") {
				this.showInput = true;
			}
			if (this.type == "address") {
				this.showAddress = true;
			}
			if (this.type == "gender") {
				this.showGender = true;
			}
			this.infoTitle = item.title;
			this.infoPlaceHolder = "请输入" + this.infoTitle;
			this.info = item.info;
			uni.setNavigationBarTitle({
				title: "修改" + item.title
			})
		},
		data() {
			return {
				infoTitle: "",
				info: "",
				showClose: true,
				type: '',
				alertTitle: "",
				infoPlaceHolder: '',
				showInput: false,
				showAddress: false,
				showGender: false,
				gender: 0,
				addressInfo: ''
			}
		},
		methods: {
			dialogToggle(type) {
				this.msgType = type;
				this.$refs.alertDialog.open();
			},
			dialogClose() {
				console.log('点击关闭')
			},
			dialogConfirm() {
				console.log('点击确认')
				this.saveInfo();
			},
			saveClick() {
				this.dialogToggle("warning");
				this.alertTitle = "是否保存修改内容";
			},
			change(e) {
				console.log(e);
				this.addressInfo = e;
				this.info = this.addressInfo.province + this.addressInfo.city + this.addressInfo.
				area;
			},
			columnchange(e) {
				console.log(e);
			},
			changeHandle(e) {
				console.log(e)
			},
			saveInfo() {
				let saveURL = config.baseURL + "info/setinfo";
				uni.showLoading({
					title: "等待中..."
				});
				self = this;
				let dataObj = new Object();
				dataObj["type"] = this.type;
				dataObj[this.type] = this.info;
				uni.request({
					url: saveURL,
					method: 'POST',
					header: {
						"Authorization": config.getToken()
					},
					data: dataObj,
					success(res) {
						uni.hideLoading();
						console.log(res.data);
						if (res.data.isok == 1) {
							uni.showToast({
								title: "修改成功",
								icon: "success"
							});
							uni.navigateBack();
						} else {
							uni.showToast({
								title: "修改失败",
								icon: "error"
							});
						}
					},
					fail(res) {
						console.log(res.errMsg.error_code);
						uni.hideLoading();
						if (res.errMsg.error_code == 401) {
							uni.reLaunch({
								url: "/pages/login/login"
							})
						}
						uni.showToast({
							title: "修改失败",
							icon: "error"
						})
					}
				})
			},
			radioChange(evt) {
				console.log(evt.detail.value)
				this.info = evt.detail.value;
			}
		}
	}
</script>

<style>
	.title_bg {
		width: 710rpx;
		margin: 20rpx;
	}

	.inputbg {
		width: 710rpx;
		margin: 20rpx;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		border-radius: 15rpx;
		border-width: 3rpx;
		border-style: solid;
		border-color: #7e7e7e;
	}

	.msgtext {
		width: 690rpx;
		margin: 10rpx;
	}

	input {
		width: 690rpx;
		margin: 10rpx;
	}

	.buttons {
		width: 710rpx;
		margin: 20rpx;
		margin-top: 60rpx;
		display: flex;
		align-items: center;
		justify-items: center;
	}

	.subBtn {
		width: 650rpx;
	}

	.address {
		margin-left: 20rpx;
	}

	.radioinputbg {
		width: 710rpx;
		margin: 20rpx;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		border: none;
		/* 先清除所有边框 */
		border-bottom: 2rpx solid #ababab;
		/* 单独设置下边框 */
	}

	.radiolbl1 {
		margin-left: 150rpx;
	}

	.radiolbl2 {
		float: right;
		margin-right: 150rpx;
	}
</style>